<template>
  <div class="course-list">
    <el-card style="margin-bottom: 20px">
      <el-form
        ref="courseForm"
        :inline="true"
        :model="courseForm"
        class="demo-form-inline"
        size="small">
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="courseForm.courseName" placeholder="请输入课程名"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="courseForm.status" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onReset" :disabled="isLoading">重置</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="isLoading">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>查询结果</span>
        <el-button
          style="float:right"
          size="small"
          type="primary"
          @click="$router.push({
            name: 'course-create'
        })">添加课程</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="isLoading">
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          align="center">
        </el-table-column>
        <el-table-column
          prop="sortNum"
          label="排序"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="scope.row.isStatusLoading"
              @change="onChangeStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="300"
          align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="$router.push({
                name: 'course-edit',
                params: {
                  courseId: scope.row.id
                }
              })"
              >编辑</el-button>
            <el-button size="small" @click="$router.push({
              name: 'course-section',
              params: {
                courseId: scope.row.id
              }
            })">内容管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="courseForm.currentPage"
      :page-sizes="[10, 30, 50]"
      :page-size="courseForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
import { getCoursePages, changeState } from '@/services/course'

export default {
  name: 'CourseList',
  data () {
    return {
      courseForm: {
        currentPage: 1,
        pageSize: 10,
        courseName: '',
        status: null
      },
      tableData: [],
      // 课程总条数
      totalCount: 0,
      // 加载中变量
      isLoading: false
    }
  },
  created () {
    // 加载所有课程信息
    this.loadCourses()
  },
  methods: {
    // 上下架切换处理
    async onChangeStatus (rowData) {
      // 点击开关，开启禁用状态
      rowData.isStatusLoading = true
      const { data } = await changeState({
        courseId: rowData.id,
        status: rowData.status
      })
      if (data.code === '000000') {
        this.$message.success(`${rowData.status === 1 ? '上架' : '下架'}成功`)
        // 取消禁用状态
        rowData.isStatusLoading = false
      }
    },
    // 分页获取课程信息
    async loadCourses () {
      this.isLoading = true
      const { data } = await getCoursePages(this.courseForm)
      if (data.code === '000000') {
        data.data.records.forEach(item => {
          // 用于表示更改的状态
          item.isStatusLoading = false
        })
        // 保存课程信息
        this.isLoading = false
        this.tableData = data.data.records
        this.totalCount = data.data.total
      }
    },
    handleSizeChange (val) {
      this.courseForm.currentPage = 1
      this.courseForm.pageSize = val
      this.loadCourses()
    },
    handleCurrentChange (val) {
      this.courseForm.currentPage = val
      this.loadCourses()
    },
    onReset () {
      this.$refs.courseForm.resetFields()
      this.courseForm.currentPage = 1
      this.loadCourses()
    },
    onSubmit () {
      this.courseForm.currentPage = 1
      this.loadCourses()
    }
  }
}
</script>

<style lang="scss" scoped></style>
